<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Test</title>
    <script type="text/javascript">
        var socket = new WebSocket('ws://localhost:8080/ws');
        var heartbeatInterval;

        socket.onopen = function() {
            console.log('Connection open!');
            startHeartbeat();
        };

        socket.onmessage = function(event) {
            console.log('Received: ' + event.data);
            if(event.data === "ping") {
                socket.send("pong");
            } else {
                document.getElementById('messages').innerHTML += '<p>' + event.data + '</p>';
            }
        };

        socket.onclose = function() {
            console.log('Connection closed');
            stopHeartbeat();
        };

        function startHeartbeat() {
            heartbeatInterval = setInterval(() => {
                if(socket.readyState === WebSocket.OPEN) {
                    socket.send("ping");
                } else {
                    stopHeartbeat();
                }
            }, 5000);
        }

        function stopHeartbeat() {
            clearInterval(heartbeatInterval);
        }
    </script>
</head>
<body>
<h1>WebSocket Test</h1>
<div id="messages"></div>
</body>
</html>